·2333
<template>

  <div id="app">
    <div style="width: 1200px;height: 80px;text-align: center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-button style="margin-right: -10px;margin-top: 10px;border: none" icon="el-icon-user"></el-button>
        <el-button style="margin-right: -20px;margin-top: 10px;border: none" icon="el-icon-search"></el-button>
        <el-button style="margin-right: -30px;margin-top: 10px;border: none" icon="el-icon-shopping-cart-2"></el-button>
        <el-menu-item index="1">商城</el-menu-item>
        <el-menu-item index="2">航拍无人机</el-menu-item>
        <el-menu-item index="3">手持拍摄设备</el-menu-item>
        <el-menu-item index="4">商用产品及方案</el-menu-item>
        <el-menu-item index="5">增值服务</el-menu-item>
        <el-menu-item index="6">DJI创意周边</el-menu-item>
      </el-menu>
    </div>
    <div style="width: 1800px;height: 50px">
      <img
          src=""
          alt="" style="margin-right: 1080px;margin-top: 20px">


      <el-button icon="el-icon-user" style="border: none"></el-button>
      <p style="margin-left: 1250px">我的账号</p>


    </div>
    <el-divider></el-divider>

    <h1>安全结账</h1>
    <div style="width: 800px;height: 850px;margin-left: 250px;float: left">
      <h3 style="text-align: left;;margin-left: 35px">收货地址</h3>
      <el-input
          type="textarea"
          :rows="2"
          placeholder="国家或地区"
          style="width: 737px;height: 28px"
          v-model="textarea">
      </el-input>
      <el-input
          type="textarea"
          :rows="2"
          placeholder="姓名"
          style="width: 737px;height: 28px;margin-top: 40px"
          v-model="textarea">
      </el-input>
      <el-input
          type="textarea"
          :rows="2"
          placeholder="手机"
          style="width: 737px;height: 28px;margin-top: 40px"
          v-model="textarea">
      </el-input>
      <el-select v-model="value" placeholder="城市" style="width: 737px;height: 28px;margin-top: 40px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-input
          type="textarea"
          :rows="2"
          placeholder="路名或街道地址,门牌号"
          style="width: 737px;height: 28px;margin-top: 40px"
          v-model="textarea">
      </el-input>

      <el-checkbox v-model="checked" style="margin-top: 40px;margin-right: 655px">设为默认</el-checkbox>
      <el-checkbox v-model="checked" style="margin-top: 15px;margin-right: 627px">接受短信提醒</el-checkbox>

      <h2 style="margin-right: 640px;margin-top: 40px">配送方式</h2>

      <div style="border:1px solid #1890ff;border-radius:10px;width: 280px;height:90px;margin-left: 30px">
        <h3 style="text-align: left;margin-left: 20px">京东 或者 顺丰 - 免费</h3>
        <p style="text-align: left;margin-left: 20px">工作日、双休日与节假日均可送货</p>
      </div>
      <h2 style="margin-right: 640px;margin-top: 40px">发票信息</h2>


      <el-button :plain="true" @click="openHTML"
                 style="width: 180px;height:70px;margin: 10px 0 0 10px;background-color: white">不需要发票
      </el-button>

      <el-button :plain="true" @click="openHTML"
                 style="width: 180px;height:70px;margin: 10px 0 0 10px;background-color: white">电子增值税发票（个人）
      </el-button>
      <el-button :plain="true" @click="openHTML"
                 style="width: 180px;height:70px;margin: 10px 0 0 10px;background-color: white">电子增值税发票（单位）
      </el-button>
      <el-button :plain="true" @click="openHTML"
                 style="width: 180px;height:70px;margin: 10px 0 0 10px;background-color: white">增值税专用发票
      </el-button>
    </div>


    <div span="12">
      <div style="width: 389px;float: left;float: left;margin-left: 80px">
        <div><h3 style="text-align: left;float: left">订单概览</h3></div>
        <div><p style="float: right">编辑购物车</p></div>
        <div style="width: 60px;height: 60px">
          <div>
            <img src="https://stormsend1.djicdn.com/tpc/uploads/spu/cover/6486fa153ef507ae70987978b9812ece@mini.png"
                 style="width: 100%;height: 100%" alt="">
          </div>
        </div>
        <p style="float: right">￥4788</p>
        <p style="margin-right: 100px">DJI Mini 3 Pro<br>¥4788 x 1</p>

        <div style="width: 60px;height: 60px;float: left">
          <div>
            <img src="https://stormsend1.djicdn.com/tpc/uploads/spu/cover/4aa23ff245f4313e535fe4774a4dfe77@mini.png"
                 style="width: 100%;height: 100%" alt="">
          </div>
        </div>
        <p style="float: right">￥788</p>
        <p style="margin-right: 100px">DJI Care 随心换 2 年版<br>¥788 x 1</p>

        <el-divider></el-divider>

        <h4 style="text-align: left">使用优惠卷</h4>
        <div style="width: 389px;height: 28px">
          <p style="text-align: left;float: left">商品总金额:</p>
          <p style="float: right">￥5576</p>
        </div>

        <div style="width: 389px;height: 28px">
          <p style="float: right">￥0</p>
          <p style="margin-right: 320px">邮费：</p>
        </div>

        <p style="float: right">￥5576</p>
        <p style="margin-right: 300px">应付金额：</p>


        <h5 style="line-height: 50px">提交订单即表示我同意 DJI 大疆商城的销售政策</h5>
        <el-button type="primary" style="width: 300px;height: 48px">提交订单</el-button>


      </div>
    </div>


    <div style="background-color: #99a9bf;width: 1900px;height: 120px ;margin-top: 1000px">
      <div>
        <img src="https://www1.djicdn.com/dps/cee842f19dde1561650754528f49d6b5.svg" alt=""
             style="margin-right: 500px;margin-top: 50px">
        <p style="color: #333333;text-decoration:none;margin-right: 150px;line-height:0px">关于我们 联系我们 招聘精英 官方旗舰店</p>

      </div>

    </div>


  </div>


</template>

<style>

</style>

<script>
export default {
  data() {
    return {
      textarea: '',
      options: [{}]

    }

  }
}

</script>
